import {Menu } from "antd";
import React, {useEffect, useState } from "react";
import {
  DesktopOutlined,
  FileOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  UngroupOutlined,
  UserOutlined,
  TeamOutlined,
  SettingOutlined
} from "@ant-design/icons";
import type { MenuProps } from 'antd';
import {useNavigate, useLocation} from "react-router-dom";


type MenuItem = Required<MenuProps>['items'][number];

/*function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('Page 1', '/page1', <PieChartOutlined />),
  getItem('Page 2', '/page2', <DesktopOutlined />),
  getItem('用户', '/user', <UserOutlined />, [
    getItem('个人信息', '/info'),
    getItem('设置信息', '/set'),
  ]),
  getItem('文件', '/file', <FileOutlined />),
  getItem('组件', '/comps', <MenuUnfoldOutlined />,[
    getItem('组件1', '/comp1', <UngroupOutlined />),
    getItem('组件2', '/comp2', <UngroupOutlined />),
  ])
];*/

const items: MenuItem[] = [
  {
    label: 'Page 1',
    key: '/page1',
    icon: <PieChartOutlined />
  },{
    label: 'Page 2',
    key: '/page2',
    icon: <DesktopOutlined />
  },{
    label: '用户',
    key: '/user',
    icon: <TeamOutlined />,
    children: [
      {
        label: '个人信息',
        key: '/user/info',
        icon: <UserOutlined />
      },{
        label: '设置信息',
        key: '/user/set',
        icon: <SettingOutlined />
      }
    ]
  },{
    label: '文件',
    key: '/file',
    icon: <FileOutlined />
  },{
    label: '组件',
    key: '/comps',
    icon: <MenuUnfoldOutlined />,
    children: [
      {
        label: '组件 1',
        key: '/comps/comp1',
        icon: <UngroupOutlined />
      },{
        label: '组件 2',
        key: '/comps/comp2',
        icon: <UngroupOutlined />
      }
    ]
  }
]

const Comp = () => {

  const navigateTo = useNavigate();
  const currentRoute = useLocation();
  //菜单点击
  const menuClick = (e:{ key:string}) => {
    navigateTo(e.key)
    // console.log([e.key])
  }

  //默认展开菜单变量
  // let firstOpenKey:string[] = [''];
  let firstOpenKey:string = ''
  function findKey(obj:{key:string}){
    return obj.key === currentRoute.pathname
  }
  for(let i=0;i<items.length;i++){
    if(items[i]!['children'] && items[i]!['children'].length>0 && items[i]!['children'].find(findKey)){
      firstOpenKey = items[i]!.key as string
      break;
    }
  }


  //展开菜单数据
  const [openKeys, setOpenKeys] = useState([firstOpenKey]);

  //展开菜单
  const listOpen = (items:string[]) => {
    // console.log(@,items[items.length-1])
    setOpenKeys([items[items.length-1]])
    console.log(firstOpenKey)

    //会话存储方式
    // window.sessionStorage.setItem('openKeys',JSON.stringify([items[items.length-1]]))
    //这是提取时需用的 JSON.parse(window.sessionStorage.getItem('openKeys')||'["/page1"]')

  }

  useEffect(()=>{
    console.log(currentRoute.pathname==='/')
    // console.log('@',firstOpenKey)
  },[])

  return(
    <Menu
      theme="dark"
      defaultSelectedKeys={[currentRoute.pathname]}
      mode="inline"
      items={items}
      onClick={menuClick}
      onOpenChange={listOpen}
      openKeys={openKeys}
    />
  )
}

export default Comp